<template>
	<view>
		<scroll-view class="index_con" scroll-y="true">
			<view class="index_bg">
				<view class="index_top">
					<!-- 搜索 -->
					<navigator url="/pages/index/seach" hover-class="none">
						<view class="index_seach">
							<view class="con">
								<view class="icon">
									<image src="../../static/images/index_i1.png" mode="widthFix"></image>
								</view>

								<div class="mass"><text>输入关键字</text></div>

								<view class="right">
									<text>搜索</text>
								</view>
							</view>
						</view>
					</navigator>
					<!-- 搜索 end -->

					<!-- banner -->
					<view class="index_baner">
						<swiper class="swiper" autoplay="true" :indicator-dots="true"
							indicator-color="rgba(255, 255, 255, .6)" indicator-active-color="rgba(255, 255, 255, 1)"
							:style="{ height: bannerh+ 'px' }">
							<swiper-item v-for="(item,i) in bannerlist" :key="i">
								<view class="item">
									<image :src="item.image" mode="widthFix"></image>
								</view>
							</swiper-item>
						</swiper>
					</view>
					<!-- banner end -->
				</view>

				<!-- 图标导航 -->
				<view class="index_icon_list">
					<view class="item">
						<navigator url="/pages/account/index" open-type="switchTab" hover-class="none">
							<image src="../../static/images/index_i2.png" mode="widthFix"></image>
							<text>账户明细</text>
						</navigator>
					</view>
					<view class="item">
						<navigator url="/pages/center/money" hover-class="none">
							<image src="../../static/images/index_i3.png" mode="widthFix"></image>
							<text>我的钱包</text>
						</navigator>
					</view>
					<view class="item">
						<navigator url="/pages/center/integral" hover-class="none">
							<image src="../../static/images/index_i4.png" mode="widthFix"></image>
							<text>我的积分</text>
						</navigator>
					</view>
					<view class="item" v-if="logintype==1">
						<navigator url="/pages/shop/list" hover-class="none">
							<image src="../../static/images/index_i5.png" mode="widthFix"></image>
							<text>我的会员</text>
						</navigator>
					</view>
					<view class="item">
						<navigator url="/pages/center/usermass" hover-class="none">
							<image src="../../static/images/index_i6.png" mode="widthFix"></image>
							<text>基本信息</text>
						</navigator>
					</view>
				</view>
				<!-- 图标导航 end -->
				<view class="index_title">
					<image src="../../static/images/index_i7.png" mode="widthFix"></image>
					<text>柏杨联盟合作商户</text>
					<image src="../../static/images/index_i8.png" mode="widthFix"></image>
				</view>

				<view class="index_list">
					<navigator :url="'/pages/index/shopinfo?id=' + item.id" hover-class="none"
						v-for="(item,i) in listinfo.items" :key="i">
						<view class="item">
							<view class="con">
								<view class="pic" v-if="item.logo" :style="{backgroundImage: 'url('+ item.logo +')'}">
								</view>
								<view class="pic" v-else style="background-image: url('http://bylm.zxinvest.cn/storage/uploads/202406/17177268738347.jpg');">
								</view>
								<view class="text">
									<text class="h4">{{item.name}}</text>
									<!-- <text class="p">商户号：{{item.merchantno}}</text> -->
								</view>
								<view class="link">商户详情</view>
							</view>
						</view>
					</navigator>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerh: 0, //banner高度
				listinfo: [],
				logintype: 0,
				bannerlist: [],
			}
		},
		onLoad() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					var _h = (res.windowWidth - 26) * 280 / 700;
					that.bannerh = _h;
				}
			});	
			if (that.common.IsWechat()) {
				if (that.common.GetStorage('byh5token')) {
					that.logintype = that.common.GetStorage('byh5type');
					that.GetBanner();
				} else {
					const code = that.getUrlKeyfunction('code');					
					if (code) {
						that.GetOpenId(code);
					} else {
						// var _url = window.location.href;
						var _url = 'http://bylm.zxinvest.cn/h5#/';						
						window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx94b6f3a9e0b140cf&redirect_uri=' + encodeURIComponent(_url) +'&response_type=code&scope=snsapi_userinfo&agentid=9&state=BYLM#wechat_redirect';
					}
				}
			} else {
				if (that.common.GetStorage('byh5token')) {
					that.logintype = that.common.GetStorage('byh5type');					
				}
				that.GetBanner();
			}
		},
		methods: {
			// 获取openid
			GetOpenId: function(code) {
				let that = this;
				console.log(code);				
				that.common.http('POST', 'login/' + code, '', function(res) {				
					console.log(res.data)										
					if(res.data.token){
						uni.setStorage({
							key: 'byopenid',
							data: res.data.user.openid,
							success: function() {
								console.log('success');
							}
						});
						uni.setStorage({
							key: 'byh5token',
							data: res.data.token,
							success: function() {
								console.log('success');
							}
						});
						uni.setStorage({
							key: 'byh5type',
							data: res.data.user.guard=='user'?'2':'1',
							success: function() {
								console.log('success');
							}
						});						
					}
					else{
						
						uni.setStorage({
							key: 'byopenid',
							data: res.data.openid,
							success: function() {
								console.log('success');
							}
						});
						
						uni.removeStorage({
							key: 'byh5token',
							success: function(res) {
								console.log('success');
							}
						});
						uni.removeStorage({
							key: 'byh5type',
							success: function(res) {
								console.log('success');
							}
						});
					}
					that.GetBanner();
				});
			},
			//根据Openid获取用户信息
			OpenidLogin: function(openid) {
				let that = this;
				let _data = {
					openid: openid
				};
				that.common.http('POST', 'openid_login', _data, function(res) {
					console.log(res)
					if (res.data == '用户不存在') {
						that.GetBanner();
					} else {
						uni.setStorage({
							key: 'token',
							data: res.data.token,
							success: function() {
								console.log('success');
							}
						});
						that.GetBanner();
					}
				});
			},
			
			
			getUrlKeyfunction: function(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location
					.href) || [, ""])[1].replace(/\+/g, '%20')) || null
			},


			GetBanner: function() {
				let that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				that.common.http('GET', 'banner', '', function(res) {
					uni.hideLoading();
					console.log(res.data)
					that.bannerlist = res.data;
					that.GetShopList();
				});
			},

			GetShopList: function() {
				let that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				let _data = {
					per_page:50,
					page:1
				}
				that.common.http('GET', 'merchant', _data, function(res) {
					uni.hideLoading();
					console.log(res.data)
					that.listinfo = res.data
				});
			},
		}
	}
</script>

<style scoped>
	.index_icon_list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 0 26rpx;
		margin-top: 40rpx;
	}

	.index_icon_list .item {
		display: block;
		width: 20%;
		text-align: center;
		text-decoration: none;
	}

	.index_icon_list image {
		width: 86rpx;
		height: auto;
		vertical-align: middle;
	}

	.index_icon_list text {
		display: block;
		margin-top: 16rpx;
		font-size: 28rpx;
		color: #333333;
	}



	.index_list {
		padding: 0 26rpx;
		margin-top: 30rpx;
		padding-bottom: 2rpx;
	}

	.index_list .item {
		background-color: #fff;
		margin: 20rpx 0;
		padding: 20rpx;
		border-radius: 8px;
		overflow: hidden;
	}

	.index_list .item .con {
		padding-left: 90rpx;
		height: 90rpx;
		padding-right: 138rpx;
		position: relative;
	}

	.index_list .item .con .pic {
		position: absolute;
		left: 0;
		top: 0;
		width: 90rpx;
		height: 90rpx;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
	}

	.index_list .item .con .pic image {
		width: 100%;
		height: auto;
	}

	.index_list .text {
		padding: 2rpx 0;
		padding-left: 20rpx;
		height: 90rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.index_list .text .h4 {
		display: block;
		font-size: 32rpx;
		color: #333;
	}

	.index_list .text .p {
		font-size: 26rpx;
		color: #666;
	}

	.index_list .link {
		width: 138rpx;
		text-align: center;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		font-size: 24rpx;
		color: #333;
		height: 48rpx;
		line-height: 46rpx;
		border-radius: 50px;
		border: 1px solid #eaeaea;
	}
</style>